<template>
  <div class="personal-panel">
    <div class="personal-desc" :style="{'background':this.$store.state.app.themeColor}">
      <div class="avatar-container">
        <img class="avatar" :src="require('@/assets/user.png')" />
      </div>
      <div class="name-role">
        <span class="sender">{{user.nickName}}</span><br>
        <span class="sender">{{user.roleNames}}</span>
      </div>
      <div class="registe-info">
          <span class="registe-info">
            <li class="fa fa-clock-o"></li>
            {{ user.createTime }}
          </span>
      </div>
    </div>
    <div class="main-operation">
      <span class="main-operation-item">
         <el-button size="small" icon="fa fa-male" @click="handleInfo"> 个人中心</el-button>
      </span>
      <span class="main-operation-item">
          <el-button size="small" icon="fa fa-key" @click="handleResetPwd"> 修改密码</el-button>
        </span>
    </div>
    <div class="personal-footer" @click="logout">
      <li class="fa fa-sign-out"></li>
      <span>退出登录</span>
    </div>
    <!-- 个人中心 -->
    <el-dialog title="个人中心" width="30%" :visible.sync="infoDialogVisible" :close-on-click-modal="false" append-to-body="true">
      <el-form :model="dataForm" ref="infoForm" label-width="80px" size="small" style="text-align:left;">
        <el-form-item label="用户名" prop="userName">
          <el-input v-model="dataForm.userName" placeholder="用户名" autocomplete="off" maxlength="64" readonly></el-input>
        </el-form-item>
        <el-form-item label="昵称" prop="nickName">
          <el-input v-model="dataForm.nickName" placeholder="昵称" autocomplete="off" maxlength="64" readonly></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="mobile">
          <el-input v-model="dataForm.mobile" placeholder="手机号" maxlength="11" readonly></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="dataForm.email" placeholder="邮箱" autocomplete="off" maxlength="64" readonly></el-input>
        </el-form-item>
        <el-form-item label="角色" prop="roleNames">
          <el-input v-model="dataForm.roleNames" placeholder="角色" autocomplete="off" maxlength="64" readonly></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="infoDialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>

    <!-- 修改密码 -->
    <el-dialog title="修改密码" width="30%" :visible.sync="pwdDialogVisible" :close-on-click-modal="false" append-to-body="true">
      <el-form :model="dataForm" ref="pwdForm" :rules="dataRule"  label-width="80px" size="small" style="text-align:left;">
        <el-form-item label="密码" prop="password">
          <el-input v-model="dataForm.password" show-password placeholder="密码" autocomplete="off" maxlength="64"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="checkPass">
          <el-input v-model="dataForm.checkPass" show-password placeholder="确认密码" autocomplete="off" maxlength="64"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="pwdDialogVisible = false">关闭</el-button>
        <el-button size="small" type="primary" :loading="editLoading" @click="submitForm()">确认</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
    name: 'PersonalPanel',
    components: {
    },
    props: {
        user: {
            type: Object
        }
    },
    data() {
        var validatePassword = (rule, value, callback) => {
            // 密码喂修改则不校验
            if (!this.isPwdModified) {
                callback()
                return
            }
            if (value === '') {
                callback(new Error('密码长度为6~64位大小字母、数字及特殊字符组成'))
            } else if (value.length < 6) {
                callback(new Error('密码长度至少6位'))
            } else if (value.length > 64) {
                callback(new Error('密码长度为6~64位大小字母、数字及特殊字符组成'))
            } else if (!/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[\s\S]{6,64}$/.test(value)) {
                callback(new Error('密码必须包含大写字母、小写字母与数字'))
            } else if (this.dataForm.checkPass !== '') {
                this.$refs.dataForm.validateField('chechPass')
                callback()
            } else {
                callback()
            }
        }
        var validateCheckPass = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请再次输入密码'))
            } else if (value !== this.dataForm.password) {
                callback(new Error('两次输入密码不一致!'))
            } else {
                callback()
            }
        }
        return {
            infoDialogVisible: false,
            pwdDialogVisible: false,
            editLoading: false,
            dataForm: {
                userId: 0,
                userName: '',
                nickName: '',
                mobile: '',
                email: '',
                password: '',
                checkPass: '',
                roleNames: ''
            },
            dataRule: {
                password: [{ required: true, message: '密码不能为空', trigger: 'blur' }, { validator: validatePassword, trigger: 'blur' }],
                checkPass: [{ required: true, message: '确认密码不能为空', trigger: 'blur' }, { validator: validateCheckPass, trigger: 'blur' }]
            }
        }
    },
    methods: {
        handleInfo: function() {
            this.infoDialogVisible = true
            Object.assign(this.dataForm, this.user)
        },
        handleResetPwd: function() {
            this.pwdDialogVisible = true
            Object.assign(this.dataForm, this.user)
        },
        // 表单提交
        submitForm() {
            var callback = (res) => {
                this.editLoading = false
                if (res.success) {
                    this.$message({ message: '操作成功', type: 'success' })
                    this.$refs['pwdForm'].resetFields()
                    this.pwdDialogVisible = false
                } else {
                    this.$message({
                        message: res.message,
                        type: 'error'
                    })
                }
            }
            this.$refs['pwdForm'].validate(valid => {
                if (valid) {
                    this.$confirm('确认提交吗？', '提示', {}).then(() => {
                        this.editLoading = true
                        if (!this.dataForm.userId || this.dataForm.userId <= 0) {
                            this.$message({
                                message: '数据错误',
                                type: 'error'
                            })
                        }
                        const params = Object.assign({}, this.dataForm)
                        this.$api.user.resetPwd(params).then(res => {
                            callback(res)
                        })
                    })
                }
            })
        },
        // 退出登录
        logout: function() {
            this.$confirm('确认退出吗?', '提示', {
                type: 'warning'
            }).then(() => {
                // 退出重置菜单加载状态
                sessionStorage.removeItem('user')
                this.$store.commit('menuRouteLoaded', false)
                this.$store.commit('updateMainTabs', [])
                // this.$router.push(this.global.loginUrl)
                this.$api.login.logout().then((res) => {
                }).catch(function(res) {
                })
            }).catch(() => {})
        }
    },
    mounted() {
    }
}
</script>

<style scoped>
  .personal-panel {
    font-size: 14px;
    width: 280px;
    text-align: center;
    border-color: rgba(180, 190, 190, 0.2);
    border-width: 1px;
    border-style: solid;
    background: rgba(182, 172, 172, 0.1);
    margin: -14px;
  }
  .personal-desc {
    padding: 15px;
    color: #fff;
  }
  .avatar {
    width: 80px;
    height: 80px;
    border-radius: 90px;
  }
  .name-role {
    font-size: 16px;
    padding: 5px;
  }
  .main-operation {
    padding: 8px;
    margin-right: 1px;
    border-color: rgba(201, 206, 206, 0.2);
    border-top-width: 1px;
    border-top-style: solid;
  }
  .main-operation-item {
    margin: 15px;
  }
  .personal-footer {
    margin-right: 1px;
    font-size: 14px;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
    border-color: rgba(180, 190, 190, 0.2);
    border-top-width: 1px;
    border-top-style: solid;
  }
  .personal-footer:hover {
    cursor: pointer;
    color: rgb(19, 138, 156);
    background: #b1a6a61e;
  }
</style>
